<template>
    <div class="list-item">
        <div class="list-item-left">
            <div class="list-item-left-up">
                <slot name="list-item-title">标题</slot>
            </div>
            <div class="list-item-left-down">   
                <slot name="list-item-detail">详细</slot>
                <slot name="list-item-msg"></slot>
            </div>
        </div>
        <div class="list-item-right">
            <a href="javascript:;">
                <slot name="list-item-operate"></slot>
            </a>
        </div>
    </div>
</template>

<script>
export default {
    name:'listItem',
}
</script>

<style lang="less" scoped>
    .list-item
    {
        font-size: 14px;
        padding: 10px 0;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .list-item-left
        {
            // border: 1px solid red;
            .list-item-left-up
            {
                color: rgba(0,0,0,.65);
            }
            .list-item-left-down
            {
                color: rgba(0,0,0,.45);;
                margin-top: 4px;
            }
        }
        .list-item-right
        {
            text-align: right;
            margin-right: 26px;
            a
            {
                text-decoration: none;
                color: #1890ff;
            }
        }
    }

    @media all and (max-width: 540px)
    {
        .list-item-left
        {
            width: 60%;
            .list-item-left-down,.list-item-left-up
            {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        .list-item-right
        {
            margin-right: 0px !important;
        }
    }
</style>